<template>
  <div>
    <div class="colorBox" :style="change ()"></div>
    <div>
      R:<input type="range"  max="250" @change="change" v-model="r"/>
      G:<input type="range"  max="250" @change="change" v-model="g"/>
      B:<input type="range"  max="250" @change="change" v-model="b"/>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      r: '',
      g: '',
      b: ''
    }
  },
  methods: {
    change () {
      return {
        background: 'rgb(' + this.r + ',' + this.g + ',' + this.b + ')'
      }
    }
  }
}
</script>
<style scoped>
.colorBox {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
}
</style>
